<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
 <%
 String openId = request.getParameter("openId")!=null?request.getParameter("openId"):"";
%>
   <!DOCTYPE html>
   <html lang="en">

   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>余量查询</title>
     <script src="./js/jquery.min.js" charset="utf-8"></script>
     <script src="./js/tool.js" charset="utf-8"></script>
     <script src="./js/rem.js" charset="utf-8"></script>
     <script src="./js/vue.min.js" charset="utf-8"></script>
     <script src="./js/axios.min.js"></script>
     <link rel="stylesheet" href="./css/normalize.min.css">
     <link rel="stylesheet" href="./css/animate.min.css">
     <link rel="stylesheet" href="./css/style.css">
   </head>

   <body>
     <div id="app" class="container" v-cloak>
       <header>
         <p class="font-12 c_gray animated slideInleft">查询日期：{{package_time}}</p>
         <p class="font-14 c_3f">当前套餐：{{ package_top | netListGet}}</p>
       </header>
       <div class="flow_banner">
         <p>
           <img src="./img/flow_query.png" alt=""></p>
       </div>
       <article>
         <div v-for="list of detailLists">
           <p class="font-14">
             <img v-bind:src="list.val.d_logo" alt="">{{list.val.d_type}}</p>
           <ul v-for="detail of list.val.details">
             <li class="c_gray">
               <!-- <a href="#">结转流量</a> -->
             </li>
             <li>
               <!-- <b class="dete_time">月底失效</b> -->
             </li>
             <li class="c_3f clear">
               <span>共{{detail.freeTotle | getFlow(detail.freeTotle,detail)}}，已用{{detail.freeUsed | getFlow(detail.freeUsed,detail)}}</span>
               <span class=" font-14">剩余<b class="c_org">{{detail.freeLeavings | getFlow(detail.freeLeavings,detail)}}</b>
                             </span>
             </li>
             <li v-bind:class="changeColor(detail.freeLeavings)">
               <!-- <transition @after-enter="transitionComplete"> -->
               <div class="animated  slideInLeft " v-bind:style="changeProgress(detail.freeTotle,detail.freeLeavings)"></div>
               <!-- </transition> -->
               <!-- v-bind:style="changeProgress(detail.d_flow_total,detail.d_flow_leave)" -->
             </li>
           </ul>
         </div>
       </article>

       <div class="pro_warning">
         <p>
           <span class="c_3f">注：</span>
         </p>
         <p class="c_gray">
           1.本页数据包含套餐内产品、赠送产品、流量包产品等当前生效产品的使用情况，供您参考，详细内容以当地营业厅查询为准。
         </p>
         <p class="c_gray">
           2.如您在产品规定的使用范围外使用，将按照标准资费计费，请注意。
         </p>
       </div>
       <!-- <div class="share_partner">
           <a href="#">分享给朋友</a>
       </div> -->
       <div class="extral_service">
         <p class="font-14 c_gray">您可能需要：</p>
         <ul>
           <li v-for="pack of morePackLists">
             <div>
               <img v-bind:src="pack.c_logo" alt="">
               <div>
                 <p class="font-14">{{pack.c_type}}</p>
                 <p>{{pack.c_detial}}</p>
               </div>
               <span>服务</span>
             </div>
           </li>
         </ul>

       </div>
       <div class="heart_info">
         <p>
           <span>温馨提示：</span>
         </p>
         <ul>
           <li>
             1.此界面仅为您提供当月余量信息查询。
           </li>
           <li>2.对于超出套餐及订购产品包外的情况，将按照标准资费计费，请您注意。</li>
           <ol v-show="showDetailClass">
             <li>2.对于超出套餐及订购产品包外的情况，将按照标准资费计费，请您注意。</li>
             <li>2.对于超出套餐及订购产品包外的情况，将按照标准资费计费，请您注意。</li>
             <li>2.对于超出套餐及订购产品包外的情况，将按照标准资费计费，请您注意。</li>
             <li>2.对于超出套餐及订购产品包外的情况，将按照标准资费计费，请您注意。</li>
           </ol>
         </ul>
       </div>
       <div class="know_more">
         <a href="javascript:void(0)" class="font-12" v-on:click="showRulerDetails()" v-show="!showDetailClass">点击了解更多 &gt;</a>
       </div>
     </div>
   </body>
   <script>
     var openId = "<%=openId%>";
     alert(openId);
     const KB = 1024;
     const MB = 1024 * 1024;
     const GB = 1024 * 1024 * 1024;
     //newList添加新信息
     var netList = [{
       type: '02',
       val: '2、3G号码'
     }];
     //业务类型的添加
     var packList = [{
         type: '01',
         val: {
           "d_type": "3G上网流量值",
           "d_logo": "./img/flow.png",
           "details": [],
           "unit": 'MB'
         }
       },
       {
         type: '13',
         val: {
           "d_type": "定向流量（校园套餐使用）",
           "d_logo": "./img/flow.png",
           "details": [],
           "unit": 'MB'
         }
       },
       {
         type: '02',
         val: {
           "d_type": "3G语音电话",
           "d_logo": "./img/tel.png",
           "details": [],
           "unit": '分钟'
         }
       },
       {
         type: '03',
         val: {
           "d_type": "3G语音电话",
           "d_logo": "./img/tel.png",
           "details": [],
           "unit": '分钟'
         }
       },
       {
         type: '03',
         val: {
           "d_type": "3G国内可视电话",
           "d_logo": "./img/tel.png",
           "details": [],
           "unit": '分钟'
         }
       },
       {
         type: '09',
         val: {
           "d_type": "本地共享时长",
           "d_logo": "./img/tel.png",
           "details": [],
           "unit": '分钟'
         }
       },
       {
         type: '10',
         val: {
           "d_type": "国内共享时长",
           "d_logo": "./img/tel.png",
           "details": [],
           "unit": '分钟'
         }
       },
       {
         type: '11',
         val: {
           "d_type": "本地长途",
           "d_logo": "./img/tel.png",
           "details": [],
           "unit": '分钟'
         }
       },
       {
         type: '12',
         val: {
           "d_type": "本地通话",
           "d_logo": "./img/tel.png",
           "details": [],
           "unit": '分钟'
         }
       },
       {
         type: '14',
         val: {
           "d_type": "亲情时长",
           "d_logo": "./img/msg.png",
           "details": [],
           "unit": '分钟'
         }
       },
       {
         type: '04',
         val: {
           "d_type": "3G短信",
           "d_logo": "./img/msg.png",
           "details": [],
           "unit": '条'
         }
       },
       {
         type: '05',
         val: {
           "d_type": "3GM值",
           "d_logo": "./img/msg.png",
           "details": [],
           "unit": '个'
         }
       },
       {
         type: '06',
         val: {
           "d_type": "3GT值",
           "d_logo": "./img/msg.png",
           "details": [],
           "unit": '个'
         }
       },
       {
         type: '08',
         val: {
           "d_type": "彩信",
           "d_logo": "./img/msg.png",
           "details": [],
           "unit": '条'
         }
       }
     ];

     Vue.filter('getFlow', function(val, index, obj) {

       switch (obj.FlowType) {
         case '01':
           val = val / KB >= 1 ?
             (val / KB).toFixed(2) + "GB" :
             val + 'MB';
           break;
         case '02':
           val += '分钟';
           break;
         case '03':
           val += '分钟';
           break;
         case '04':
           val += '条';
           break;
         case '04':
           val += '条';
           break;
         case '05':
           val += '个';
           break;
         case '06':
           val += '个';
           break;
         case '08':
           val += '条';
           break;
         case '09':
           val += '分钟';
           break;
         case '10':
           val += '分钟';
           break;
         case '10':
           val += '分钟';
           break;
         case '11':
           val += '分钟';
           break;
         case '12':
           val += '分钟';
           break;
         case '13':
           val = val / KB >= 1 ?
             (val / KB).toFixed(2) + "GB" :
             val + 'MB';
           break;
         case '14':
           val += '分钟';
           break;
         default:

       }
       return val;
     });
     Vue.filter('useFlow', function(value) {
       // console.log(value);
       var unit = value.slice(-2);
       // console.log(unit);
       return value.slice(-2);
     });
     Vue.filter('netListGet', function(val) {
       var typeName = '';
       netList.forEach(function(ele, index, arr) {
         console.log(index, ele);
         console.log(val);
         if (ele.type == val) {
           typeName = ele.val;
           return;
         }
       })
       return typeName;
     })
     var vm = new Vue({
       el: '#app',
       data: {
         //相应外链请求接口
         pack_url: './json/_morepack.json',
         pack_data: {},
         queryInfoServlet_data: {},

         queryInfoServlet_url: '../queryInfoServlet?typeStr=queryPackageBalance&openId=' + openId,
         //套餐详情
         package_details: '',
         package_changes: '',
         package_time: '',
         package_top: '',
         showDetailClass: false,
         prog: {
           width: 0
         }
       },
       mounted() {
         this.$nextTick(function() {
           // 页面初始化时调用的函数
           this.updateData();
         });
       },
       computed: {
         detailLists() {
           return this.package_details;
         },
         morePackLists() {
           return this.package_changes;
         }
       },
       methods: {
         //显示规则详细
         showRulerDetails: function(target) {
           console.log(target);
           this.showDetailClass = true;
         },
         //判断状态值
         judgeStatus: function(res) {
           var context = this;
           if (!res) {
             console.log('未获取到数据');
             return;
           }
           var type,
             packageBalance,
             flowList;
           type = res.status;
           context.package_top = res.nettype;
           context.package_time = res.dateStr;
           console.log(res.nettype);
           console.log(context.package_top);
           packageBalance = res.packageBalance;
           //sssconsole.log(packageBalance);
           switch (type) {
             case '0000':
               if ('0000' == packageBalance.AnswerCode) {
                 for (let val of packageBalance.flowInfValues) {
                   packList.map(function(elem, index, arr) {
                     if (val.FlowType == elem.type) {
                       elem.val.details.push(val);
                     }
                   });
                 }
                 //console.log(packList); 将格式化的值传输给vue 达特显示在页面上
                 context.package_details = packList;
               } else {
                 alert('查询失败')
               }
               break;
             case '0001':
               alert('您的帐号未关注');
               break;
             case '0002':
               alert('您的帐号未绑定');
               break;
             case '0003':
               alert('当前帐号未非内蒙帐号');
             case '0004':
               alert('正在开发中');
               break;
             case '0005':
               alert('非2，3，4G号码');
               break;
             default:
           }
         },
         updateData: function() {
           var context = this;
           function getPerson() {
             return axios.post(context.person_url, context.person_data);
           }
           function getMore() {
             return axios.post(context.pack_url, context.pack_data);
           }

           function get10010() {
             return axios.post(context.queryInfoServlet_url, context.queryInfoServlet_data);
           }
           // 并发请求
           axios.all([getMore(), get10010()]).then(axios.spread(function(res_more, get10010) {
             // 两个请求现在都执行完成 console.log(get10010); console.log(res_more);
             if (200 == res_more.status) {
               context.package_changes = res_more.data.res;
             }
             //调用判断状态的函数
             if (200 == res_10010.status) {
               console.log(res_10010);
               context.judgeStatus(res_10010.data);
             }
           })).catch(function(err) {
             console.log(err);
           })
         },
         changeProgress: function(total, leave) {
           var context = this;
           // console.log(total, leave); console.log(parseFloat(total), parseFloat(leave));
           console.log((parseFloat(total) - parseFloat(leave)) / parseFloat(total) * 100 + '%');
           var use = (parseFloat(total) - parseFloat(leave)) / parseFloat(total) * 100;

           return {
             width: use.toFixed(2) + '%'
           };
         },
         changeColor: function(val) {
           var value = parseFloat(val) - 0;
           if (value > 0) {
             return "progress_bar";
           } else {
             return "progress_bar_no";
           }
           console.log(val);
         },

         animatePro: function(ele) {
           console.log('11');
           $(ele).addClass('slideInleft');
           console.log('22');
         }
       }
     });
   </script>

   </html>
